<template>

    <div style="display: flex;flex-wrap: wrap;">
        <div style="width: 45%;display: flex;justify-content: center;" v-for="item in essay_list" :key="item._id">
            <Essay_item :item="item"></Essay_item>
        </div>
    </div>
</template>
<script setup lang="ts">
import Essay_item from "@/components/Essay/index.vue"
import { onMounted, ref, watch, onUnmounted } from "vue";
import { Get_essay_list } from "@/apis/web/WebApi";
import { format } from "@/utils/formatTime"
import { WebEssay } from "@/types/WebEssay";
import WebStore from "@/store/WebStore";
import { ElMessage } from "element-plus";
const store = WebStore()
const currentPage = ref(1)
const essay_list = ref<WebEssay[]>([])
const isbottom = ref(false)
onMounted(() => {
    getData()
})
watch(() => store.currentState, () => {

    currentPage.value++
    getData()
})
const getData = async () => {
    if (isbottom.value) return
    const result = await Get_essay_list(0, currentPage.value * 6 - 6)

    if (result.data.length === 0) {
        ElMessage({
            type: "info",
            message: '到底了'
        })
        isbottom.value = true
    }
    result.data.forEach((item: any, index: number) => {
        result.data[index].publish_time = format.formatDate(item.publish_time)
    });
    essay_list.value = [...essay_list.value, ...result.data]
}



</script>

<style lang="scss" scoped></style>